<!--奖金测算-测算审核-机构方案审核-->
<template>
  <basic-container class="bonus">
    <div v-if="show">
      <!--搜索栏目-->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" >
          <el-form-item label="负责机构">
            <el-select v-model="searchForm.computeDeptId" placeholder="负责机构" >
              <el-option
                v-for="item in bonusItemDeptIdOptions"
                :key="item.deptId"
                :label="item.name"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批方案名称">
            <el-input placeholder="请输入审批方案名称" v-model="searchForm.bonusItemName"></el-input>
          </el-form-item>
          <el-form-item  label="审批编号">
            <el-input placeholder="请输入审批编号" v-model="searchForm.bonusItemCode"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div>
        <div class="menu-left">
        </div>
        <el-table :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 280px )`">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            width="60px"
            prop=""
            label="序号"
            align="center"
          >
            <template slot-scope="scope">
              {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="approvalNumber"
            label="审批编号"
            align="left"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="computeName"
            label="审批方案名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="computeDeptName"
            label="所属机构"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <span slot="reference">{{scope.row.status |transState}}</span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.procId,scope.row)"
                  >流程跟踪</el-button>
                </el-popover>
              </div>
            </template>
<!--            <template slot-scope="scope">
               <span :class="scope.row.status == '1'? 'green' : scope.row.status == '3' ? 'red':''">
                 {{scope.row.status == '0' ? '未提交' : scope.row.status == '3' ? '已驳回' : '已审核'}}
               </span>
            </template>-->
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
<!--              <el-button type="text" @click="submitEvaluateOrg(scope.row)">提交</el-button>-->
              <el-button type="text" @click="view(scope.row)">方案提交</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            :total="page.total"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--拆分-->
    <detail-tj ref="detailRef" v-if="!show" @close="close"></detail-tj>
    <processTracking
      ref="processTracking"
      @processTrackingChildren="onLoad"
    ></processTracking>
  </basic-container>
</template>

<script>
import detailTj from '@/views/bonusmanage/calculate/examine/org/detailTj'
import {getOrg, fetchList, deleteBatch} from '@/api/bonus/items'
import {jgfaList} from "@/api/bonus/calculateexamineorg"
import { showMessage } from "@/api/activiti/task";
import processTracking from "@/views/bonusmanage/components/processTracking";
import {getNextTaskUser, submitAudit} from "@/api/dailyExamine/eventExamine/event";
import {submitToProcessMulScheme} from "@/api/bonus/calculateorgprogramme";
export default{
  name:"items",
  components:{
    detailTj,
    processTracking
  },
  data() {
    return {
      show:true ,
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      searchForm: {computeDeptId:''},
      bonusItemDeptIdOptions:[],
      bonusItemsScopeOptions:[
        {label:'公共',value:'公共'},
        {label:'私有',value:'私有'}
      ], //奖金范围
      multipleSelection: [],
      ids:[]
    }
  },
  filters: {
    transState(val) {
      switch (val) {
        case "1":
          return "待提交";
          break;
        case "2":
          return "已提交";
          break;
        case "3":
          return "审批中";
          break;
        case "4":
          return "审批中";
          break;
        case "5":
          return "已驳回";
          break;
        case "10":
          return "审批完成";
          break;
      }
    }
  },
  computed: {

  },
  created(){
    //初始化获取二级机构
    this.getOrg() ;
  },
  methods:{
    getOrg(){
      getOrg().then(res => {
        this.bonusItemDeptIdOptions = res.data.data
        this.$set(this.searchForm,'deptId',this.bonusItemDeptIdOptions[0].deptId)
        //获取数据
        this.onLoad() ;
      })
    },
    handleSearch(){
      this.onLoad() ;
    },

    onLoad(){
      this.loading = true ;
      jgfaList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      },this.searchForm)).then(res=>{
        if (res.data.code == 0){
          this.tableData = res.data.data.records
        /*  this.tableData.map((item,index)=>{ //0未提交 1已审核 3已驳回
            if (index == 0){
              item.status = '0'
            }else if (index == 1){
              item.status = '1'
            }else{
              item.status = '3'
            }
          })*/
          this.page.total = res.data.data.total ;
          this.page.currentPage = res.data.data.current ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.loading = false ;
      }).catch(()=>{
        this.loading = false ;
      })
    },
    uploadHanle(){

    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
        return ele.id
      })
    },

    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      this.onLoad() ;
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val;
      this.onLoad() ;
    },
    view(item){
      this.show = false
      this.$nextTick(()=>{
        this.$refs.detailRef.init(item,item.detilIds) ;
      })
    },
    del(batch,item){
      let msg = '' ;
      let ids = ''
      if (batch){ //批量
        msg = '确定删除选中的数据吗?'
        if (this.multipleSelection.length == 0){
          this.$message.error('请勾选要删除的数据')
          return ;
        }
        ids = this.ids.toString() ;
      }else{ //单条
        msg = '确定删除此条数据吗?'
        ids = item.id ;
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true ;
        deleteBatch({ids:ids}).then(res=>{
          this.$message.success('操作成功')
          this.onLoad() ;
          this.loading = false ;
        }).finally(()=>{
          this.loading = false ;
        })
      }).catch(() => {

      });
    },

    refresh(){
      this.onLoad() ;
    },
    close(refresh){
      this.show = true ;
      this.onLoad() ;
    },
    downLoad(){
      window.location.href = '../../static/人员奖惩导入.xlsx'
    },
    showMessage(proId,row) {
      //console.log(row);
      this.$refs.processTracking.init(proId);
    },
    // 批量提交审核
    submitEvaluateOrg(row) {
      this.$confirm('确定要提交到审批流吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        /* this.loading = true ;
         submitToProcessMulScheme(this.ids.toString()).then(res=>{
           if (res.data.code == 0){
             this.refresh() ;
             this.$message.success('提交成功')
           }
           this.loading = false ;
         }).finally(()=>{
           this.loading = false ;
         })*/

      }).catch(() => {

      });
    },
  }
}
</script>
<style scoped>

</style>

